<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		nav{
			width:100px;
			margin:20px auto;
		}
		#btn{
			border:1px solid #ccc;
			
			height:50px;
			line-height:50px;
			text-align:center;
			border-radius:5px;
			cursor:pointer;
		}
		#btn:hover{
			background-color:#ccc;
		}
		#list{
			border:1px solid #ccc;
			display:none;
			list-style:none;
			border-radius:5px;
			cursor:pointer;
			text-align:center;
		}
		#list li{
			display:block;
			line-height:50px;
		}
		#list li:hover{
			background-color:#ccc;
		}
	</style>
</head>
<body>
	<nav>
		<div id="btn">按钮</div>
		<ul id="list">
			<li id="li1" onclick="num()">第一个</li>
			<li id="li2" onclick="num()">第二个</li>
			<li id="li3" onclick="num()">第三个</li>
		</ul>
	</nav>
</body>
<script>
	function $(id){
			return document.getElementById(id);
		}
	$('btn').kaiGuan=false;
	$('btn').onclick=function(){
		if(this.kaiGuan==false){
			$('list').style.display='block';
			this.kaiGuan=true;
		}else{
			$('list').style.display='none';
			this.kaiGuan=false;
		}
	}
	$('li1').onclick=function(){
		$('btn').innerHTML=$('li1').innerHTML;
		$('list').style.display='none';
	}
	$('li2').onclick=function(){
		$('btn').innerHTML=$('li2').innerHTML;
		$('list').style.display='none';
	}
	$('li3').onclick=function(){
		$('btn').innerHTML=$('li3').innerHTML;
		$('list').style.display='none';
	}
</script>
</html>